<div *ngIf="!saved">
  <mat-tab-group style="padding-bottom: 1em;">
    <mat-tab label="Edit">
      <div>
        <mat-form-field class="example-full-width" style="width: 100%; padding-top: 1em;">
          <input matInput placeholder="Link to your avatar (optional)" [(ngModel)]="us.user.AvatarLink" />
        </mat-form-field>
      </div>
      <div>
        <mat-form-field style="width: 100%">
          <input matInput placeholder="Fullname (optional)" [(ngModel)]="us.user.Name" />
        </mat-form-field>
      </div>
      <div>
        <mat-form-field style="width: 100%">
          <input disabled matInput placeholder="Nickname" [(ngModel)]="us.user.Nick" />
        </mat-form-field>
      </div>
      <div>
        <mat-form-field style="width: 100%;">
          <input matInput placeholder="Email" [(ngModel)]="us.user.Email" />
        </mat-form-field>
      </div>
      <div class="button" align="center" style="padding-bottom: 1em;">
        <button mat-raised-button (click)="save()" color="accent">Save</button>
      </div>
    </mat-tab>
    <mat-tab label="Password">
      <mat-form-field style="width: 100%; padding-top: 1em;">
        <input matInput placeholder="Old password" type="password" [(ngModel)]="oldPw" />
      </mat-form-field>
      <mat-form-field style="width: 100%;">
        <input matInput placeholder="New password" type="password" [(ngModel)]="newPw" />
      </mat-form-field>
      <mat-form-field style="width: 100%;">
        <input matInput placeholder="New password confirm" type="password" [(ngModel)]="newPwCf" />
      </mat-form-field>
      <div class="button" align="center" style="padding-bottom: 1em;">
        <button mat-raised-button (click)="changePassword()" color="accent">Change password</button>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>

<div *ngIf="saved">
  <div style="padding-bottom: 2em;" *ngIf="user?.AvatarLink">
    <img src="{{user?.AvatarLink}}" class="img" style="max-width:100%;" align="middle">
  </div>
  <div *ngIf="!user?.AvatarLink" style="padding-bottom: 2em;">
    <img src="/assets/nophoto.jpg" class="img" style="max-width:100%;" align="middle">
  </div>
  <div readonly fxFlexLayout="row" fxLayoutAlign="center center">
    <font size="5">
      <b>{{user?.Name}}</b>
    </font>
    <span fxFlex="1 1 auto"></span>
    <span *ngIf="user?.Nick === us.user?.Nick" align="end" size="5">
      <button mat-icon-button>
        <i (click)="edit()" style="color:#444" class="material-icons">mode_edit</i>
      </button>
    </span>
  </div>
  <div style="padding-bottom: 0em">
    <font size="5" color="#666">
      <i>@{{user?.Nick}}</i>
    </font>
  </div>
  <div *ngIf="user?.Nick === us.user.Nick" style="padding-top: 1.2em;" readonly>
    <font size="4">{{us.user.Email}}</font>
  </div>
</div>